<template>
  <div id="Example">
     <zk-table
         index-text="#"
         :stripe="props.stripe"
         :columns="columns"
         :data="data"
         :show-row-hover="props.showRowHover"
         :show-summary="props.showSummary"
         :show-header="props.showHeader"
         :show-index="props.showIndex"
         :tree-type="props.treeType"
         :border="props.border"
         :selection-type="props.selectionType"
         :expand-type="props.expandType"
     >
       <template slot="$expand" scope="scope">
         {{
           `this is my name ${scope.row.name},
          this is my rowIndex ${scope.rowIndex}`
         }}
       </template>

      <template slot="operation" slot-scope="scope">
        <el-button-group width="200px">
          <el-button  size="medium" type="primary" icon="el-icon-edit" @click="modified(scope.row)"></el-button>
          <el-button  size="medium" type="primary" icon="el-icon-share"></el-button>
          <el-button  size="medium" type="primary" icon="el-icon-delete" @click="deleteData"></el-button>
        </el-button-group>
       </template>
     </zk-table>
    <div>
      <!-- 新建用户对话框-->
      <el-dialog
        title="修改用户"
        width="50%"
        label-width="70px"
        :visible.sync="dialogFormVisible">
        <el-form :model="addForm" label-width="80px">
          <el-form-item label="学号">
            <el-input v-model="addForm.code" />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="addForm.name" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="addForm.address" />
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="addForm.gender" />
          </el-form-item>
          <el-form-item label="主修课程">
            <el-input v-model="addForm.major" />
          </el-form-item>
          <el-form-item label="修改时间">
            <el-input v-model="addForm.dateModified" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogFormVisible = false">确定</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">取消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script>
export default {
  name: 'Example',
  data() {
    return {
      data: [
        {
          id: 1,
          code: '201808064512',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
          gender: '一年级',
          major: '计算机',
          dateModified: '2016-05-02',
          dateCreated: '2016-05-02',
          children: [
            {
              id: 21,
              code: '201808064512',
              name: '张三',
              address: '上海市普陀区金沙江路 1518 弄',
              gender: '一年级',
              major: '计算机',
              dateModified: '2016-05-02',
              dateCreated: '2016-05-02'
            }
          ]
        },
        {
          id: 2,
          code: '201808064512',
          name: '李四',
          address: '上海市普陀区金沙江路 1518 弄',
          gender: '一年级',
          major: '计算机',
          dateModified: '2016-05-02',
          dateCreated: '2016-05-02',
          children: [
            {
              id: 22,
              code: '201808064512',
              name: '张三',
              address: '上海市普陀区金沙江路 1518 弄',
              gender: '一年级',
              major: '计算机',
              dateModified: '2016-05-02',
              dateCreated: '2016-05-02'
            }
          ]
        },
        {
          id: 3,
          code: '201808064512',
          name: '王五',
          address: '上海市普陀区金沙江路 1518 弄',
          gender: '一年级',
          major: '计算机',
          dateModified: '2016-05-02',
          dateCreated: '2016-05-02'
        },
        {
          id: 4,
          code: '201808064512',
          name: '小刘',
          address: '上海市普陀区金沙江路 1518 弄',
          gender: '一年级',
          major: '计算机',
          dateModified: '2016-05-02',
          dateCreated: '2016-05-02'
        },
        {
          id: 5,
          code: '201808064512',
          name: '小红',
          address: '上海市普陀区金沙江路 1518 弄',
          gender: '一年级',
          major: '计算机',
          dateModified: '2016-05-02',
          dateCreated: '2016-05-02'
        }
      ],
      columns: [
        {
          label: 'id',
          prop: 'id',
          width: '100px'
        },
        {
          label: '学号',
          prop: 'code',
          width: '100px'
        },
        {
          label: '姓名',
          prop: 'name',
          width: '100px'
        },
        {
          label: '地址',
          prop: 'address',
          width: '100px'
        },
        {
          label: '年级',
          prop: 'gender',
          width: '100px'
        },
        {
          label: '主修课程',
          prop: 'major',
          width: '100px'
        },
        {
          label: '创建时间',
          prop: 'dateCreated',
          width: '100px'
        },
        {
          label: '修改时间',
          prop: 'dateModified',
          width: '100px'
        },
        {
          label: '操作',
          prop: 'operation',
          width: '100px',
          type: 'template',
          template: 'operation'
        }
      ],
      props: {
        border: true,
        showHeader: true,
        showIndex: true,
        showSummary: false,
        indexText: true,
        isFold: true,
        treeType: true,
        expandType: false,
        selectionType: false,
        showRowHover: true,
        stripe: true
      },
      addForm: {
        code: '',
        name: '',
        address: '',
        gender: '',
        major: '',
        dateModified: this.formatDate(new Date())
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      visible: false
    }
  },
  methods: {
    modified(date) {
      console.log('***按钮触发****')
      console.log(date)
      this.dialogFormVisible = true
      this.changeData(date)
    },
    changeData(date) {
      this.addForm.code = date.code
      this.addForm.name = date.name
      this.addForm.address = date.address
      this.addForm.gender = date.gender
      this.addForm.major = date.major
    },
    deleteData() {
      console.log("*****删除方法******")
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    formatDate(now) {
      const year = now.getFullYear()
      const month = now.getMonth() + 1
      const date = now.getDate()
      const hour = now.getHours()
      const minute = now.getMinutes()
      const second = now.getSeconds()
      return year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
</style>
